/*eslint-disable*/
import React, { Component } from 'react'
import {
  View,
  Dimensions,
  ListView,
  TextInput,
  Image,
  Text,
  FlatList,
  RefreshControl,
  TouchableOpacity
} from 'react-native'
import uuid from 'uuid'

const { width, height } = Dimensions.get('window');


class ListFresh extends Component {
  //构造函数
  constructor(props) {
    super(props)

    this.state = {
      refreshing: false,
      isLoreMoreing: 'LoreMoreing',
      dataSource: []

    }
  }
  componentDidMount() {
    const { dataSource } = this.props
    this.setState({//eslint-disable-line
      dataSource
    })
  }

  Refresh = () => {
    this.setState({
      refreshing: true
    });
    const { onReFresh } = this.props
    onReFresh()
    setTimeout(() => {
      this.setState({
        refreshing: false,
        dataSource: this.props.dataSource
      });
      this.isLoreMore = false;
    }, 2000);
  }

  isLoreMore = false;
  LoreMore = () => {
    if (this.isLoreMore === false) {
      this.setState({
        isLoreMoreing: 'LoreMoreing'
      });

      this.isLoreMore = true;
      this.responseData = this.responseData.concat({ id: '加载的新数据' });
      setTimeout(() => {
        this.setState({
          dataSource: this.responseData
        })
      }, 500);

      setTimeout(() => {
        this.setState({
          isLoreMoreing: 'LoreMoreEmpty'
        })
      }, 500);
    }
  }

  renderRow = (item) => {
    const {
      RenderChild,
      currentUser,
      dispatch
    } = this.props
    const rowData = item.item;
    const index = rowData.key
    return (
      <RenderChild
        key={uuid()}
        dataSource={rowData}
        dispatch={dispatch}
        currentUser={currentUser}
      />
    )
  }

  renderSeparator = () => {
    return (
      <View style={{ height: 1, backgroundColor: 'rgb(200,200,200)' }} />
    )
  }

  renderFooter = () => {
    if (this.state.dataSource.length !== 0 && this.state.isLoreMoreing === 'LoreMoreing') {
      return (
        <View style={{
          height: 44,
          backgroundColor: 'rgb(200,200,200)',
          justifyContent: 'center',
          alignItems: 'center'
        }}
        >
          <Text>正在加载....</Text>
        </View>
      )
    } else if (this.state.isLoreMoreing === 'LoreMoreEmpty') {
      return (
        <View style={{
          height: 44,
          backgroundColor: 'rgb(200,200,200)',
          justifyContent: 'center',
          alignItems: 'center'
        }}
        >
          <Text>暂无更多</Text>
        </View>
      )
    }
    return null
  }

  render() {
    return (
      <View>
        <FlatList
          showsVerticalScrollIndicator={false}//是否显示垂直滚动条
          showsHorizontalScrollIndicator={false}//是否显示水平滚动条
          numColumns={1}//每行显示1个
          ref={flatList => this._flatList = flatList}
          ListFooterComponent={this.renderFooter}//尾巴
          renderItem={this.renderRow}//每行显示一项
          ItemSeparatorComponent={this.renderSeparator}//每行底部---一般写下划线
          enableEmptySections={true}//数据可以为空
          keyExtractor={(item, index) => item.key = index.toString()}
          onEndReachedThreshold={0.1}//执行上啦的时候10%执行
          // onEndReached={this.LoreMore}
          data={this.state.dataSource}
          refreshControl={
            <RefreshControl
              refreshing={this.state.refreshing}
              onRefresh={this.Refresh}
              title="Loading..."
            />
          }
        />
      </View>
    )
  }
}

export default ListFresh
